<template>
  <div>
    <div class="top">
      <div class="back">
        <router-link to="/home">
          <span style="padding: 3px; border: 1px solid #333">返回到首页(方法1)</span>
        </router-link>
      </div>
      <div class="back">
        <button @click="tap(index)">
          <span>返回到上一页(方法2)</span>
        </button>
      </div>
    </div>

    <div class="middle">
      <div class="pinia">
        <div class="name">姓名:{{ mainStore.name }}</div>
        <div class="age">年龄:{{ age }}</div>
        <button @click="addAge">修改年龄</button>
      </div>
    </div>

    <div>
    <button @click="toggle">Toggle</button>
    <div v-show="isVisible">This content can be toggled</div>
  </div>

  </div>
</template>
  
<script setup>
import { watch, ref } from "vue";
import { storeToRefs } from "pinia";
// '@/'代表了'src/'
import { useMainStore } from "@/pinia/store.ts";
import router from "@/router/routes";
import { useRoute } from "vue-router";
const route = useRoute();

const mainStore = useMainStore();
const active = ref(0);
const { age } = storeToRefs(mainStore);
function addAge() {
  mainStore.age = mainStore.age + 1;
}

// 跳转到上一页
const tap = (index) => {
  console.log("ok");
  router.go(-1);
  // router.back();
};


const isVisible = ref(true)
 
function toggle() {
  isVisible.value = !isVisible.value
}
 
watch(isVisible, (newValue, oldValue) => {
  console.log(`isVisible changed from ${oldValue} to ${newValue}`)
})







</script>
  
<style lang="scss" scoped>
.top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  .back {
    display: flex;
    width: 50%;
    height: 50px;
    align-items: center;
    justify-content: center;
  }
}
.middle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  .pinia {
    display: block;
    width: 300px;
    align-items: center;
    justify-content: center;
    background-color: aqua;
    .name {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
    }
    .age {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
    }
    button {
      display: flex;
      width: 100px;
      align-items: center;
      justify-content: center;
      margin: 10px 100px 0 100px;
    }
  }
}
</style>